<template>
	<view class="flex-column" @click="tap">
		<view class="flex-row flex-items-center font-14 font-weight-regular" style="color: #313C56; margin-top: 8px;">
			<image v-if="requisite" src="../../static/xinghao.png" style="width: 8px; height: 8px; margin-right: 4px;"></image>
			<text>{{ title }}</text>
		</view>
		<view class="flex-row flex-items-center" style="margin-top: 8px;">
			<uv-input v-model="content" :value="content" :disabled="touchDisabled"  :placeholder="placeholder" placeholderStyle="color: #B7C0CA; font-size: 16px;"
				fontSize="16px" color="#313C56" border="none" disabled-color="white"
				customStyle="marginLeft: -4px; backgroundColor: rgba(255, 255, 255, 0)" @blur="blur"></uv-input>
			<image v-if="touchDisabled && !unit" src="../../static/arrow-right.png" style="height: 16px; width: 16px;"></image>
			<text v-if="unit" class="font-14 font-weight-regular" style="color: #313C56;">{{ unit }}</text>
		</view>
		<view
			style="width: calc(100%); height: 1px; background-color: #F7F9FD; margin-top: 10px;">
		</view>
	</view>
</template>

<script>

	export default {
		name: "publish-item",
		emits: ['touchTap', 'inputEnd'],
		props: {
			/**
			 * 标题
			 */
			title: {
				type: String,
				default: 'xxxx'
			},
			/**
			 * 单位
			 */
			unit: {
				type: String,
				default: null
			},
			/**
			 * 内容
			 */
			value: {
				type: String,
				default: ''
			},
			/**
			 * 是否必须操作
			 */
			requisite: {
				type: Boolean,
				default: false
			},
			/**
			 * 是否进行点击操作，true = 
			 */
			touchDisabled: {
				type: Boolean,
				default: false
			},
			/**
			 * 占位文本
			 */
			placeholder: {
				type: String,
				default: '请输入'
			}
		},
		data() {
			return {
				content: ''
			};
		},
		watch: {
			value: {
				immediate: true,
				handler(newVal) {
					console.log(newVal)
					this.content = newVal
				}
			}
		},
		methods: {
			blur() {
				this.$emit('inputEnd', this.content)
			},
			tap() {
				if (this.touchDisabled) {
					this.$emit('touchTap')
				}
				
			}
		}
	}
</script>

<style>

</style>